<template>
  <el-row justify="space-between" class="h-full">
    <el-col class="h-full">
      <el-card
        shadow="never"
        class="pt-[20px] w-full h-full flex flex-column align-center"
      >
        <div class="font-bold mb-[20px]">法人人脸识别验证</div>

        <p class="mt-[20px]">
          请使用微信扫描下方二维码完成人脸识别，以确认开户意愿
        </p>

        <ReQrcode :text="qrcodeText" />

        <el-text class="mx-1" type="info"
          >若无法扫描，请确保手机网络正常并尝试刷新页面</el-text
        >
        <div class="w-full flex justify-center items-center gap-x-2 mt-[20px]">
          <el-button size="large" type="primary" @click="next">
            已完成签约
          </el-button>
          <el-button size="large" @click="logout"> 退出登录 </el-button>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { ref, unref } from "vue";
import { useRouter } from "vue-router";
import { useUserStoreHook } from "@/store/modules/user";
import { message } from "@/utils/message";
import ReQrcode from "@/components/ReQrcode";
const router = useRouter();
defineOptions({
  name: "QrCode"
});

const qrcodeText = "vue-pure-admin";

const asyncTitle = ref("");
setTimeout(() => {
  asyncTitle.value = unref(qrcodeText);
}, 3000);
const codeClick = () => {
  message("点击事件", { type: "info" });
};
const disabledClick = () => {
  message("失效", { type: "info" });
};

const logout = () => {
  useUserStoreHook().logOut();
};

const next = () => {
  router.push("/application/follow");
};
</script>

<style scoped lang="scss">
:deep(.el-card__body) {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>
